<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机发布页面样式集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      /* 基础颜色变量 */
      --primary: #4F46E5;
      --secondary: #EC4899;
      --accent: #F59E0B;
      --success: #10B981;
      --danger: #EF4444;
      --dark: #1F2937;
      --light: #F9FAFB;
      --white: #FFFFFF;
      --gray: #6B7280;
      --light-gray: #E5E7EB;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      
      /* 主题颜色定义 */
      --theme1-primary: #4F46E5;
      --theme2-primary: #EC4899;
      --theme3-primary: #0EA5E9;
      --theme4-primary: #10B981;
      --theme5-primary: #F59E0B;
      --theme6-primary: #1F2937;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    
    /* 发布页面容器 */
    .post-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .post-page.active {
      display: flex;
      animation: fadeIn 0.5s ease;
    }
    
    /* 导航栏样式 */
    .navbar {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--light-gray);
      position: relative;
      z-index: 10;
      background-color: var(--white);
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .nav-btn {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }
    
    .cancel-btn {
      color: var(--gray);
    }
    
    .post-btn {
      background-color: var(--primary);
      color: white;
    }
    
    /* 内容区域 */
    .content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    
    /* 发布表单样式 */
    .post-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    
    .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .user-name {
      font-weight: 500;
      font-size: 14px;
    }
    
    .post-input {
      width: 100%;
      min-height: 120px;
      border: none;
      outline: none;
      resize: none;
      font-size: 16px;
      color: var(--dark);
      background-color: transparent;
      padding: 0;
    }
    
    .post-input::placeholder {
      color: var(--gray);
    }
    
    /* 功能按钮区 */
    .action-buttons {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-top: 1px solid var(--light-gray);
      border-bottom: 1px solid var(--light-gray);
    }
    
    .action-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--gray);
      font-size: 14px;
      cursor: pointer;
    }
    
    .action-btn i {
      font-size: 18px;
    }
    
    /* 图片预览区 */
    .image-preview {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 8px 0;
    }
    
    .preview-item {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }
    
    .preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .remove-img {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: var(--danger);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
    }
    
    /* 话题选择区 */
    .topic-section, .tag-section, .link-section {
      margin-top: 16px;
    }
    
    .section-label {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }
    
    .topic-selector, .tag-selector {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding-bottom: 8px;
    }
    
    .topic-item, .tag-item {
      padding: 6px 14px;
      background-color: var(--light);
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .topic-item.active, .tag-item.active {
      background-color: var(--primary);
      color: white;
    }
    
    .topic-item i, .tag-item i {
      font-size: 12px;
    }
    
    .link-input-group {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    
    .link-input {
      flex: 1;
      padding: 10px 12px;
      border: 1px solid var(--light-gray);
      border-radius: 8px;
      font-size: 14px;
      outline: none;
    }
    
    .link-input:focus {
      border-color: var(--primary);
    }
    
    .add-link-btn {
      color: var(--primary);
      font-size: 20px;
      cursor: pointer;
    }
    
    .added-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      background-color: var(--light);
      border-radius: 8px;
      margin-top: 10px;
    }
    
    .link-favicon {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background-color: var(--gray);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 12px;
    }
    
    .link-info {
      flex: 1;
      overflow: hidden;
    }
    
    .link-title {
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .link-url {
      font-size: 12px;
      color: var(--gray);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .remove-link {
      color: var(--gray);
      cursor: pointer;
    }
    
    /* 已选标签展示 */
    .selected-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    
    .selected-tag {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background-color: var(--primary);
      color: white;
      border-radius: 20px;
      font-size: 13px;
    }
    
    .remove-tag {
      cursor: pointer;
      font-size: 14px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--light-gray);
      color: var(--dark);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      color: var(--dark);
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 主题样式 */
    .theme1 {
      --primary: var(--theme1-primary);
    }
    
    .theme2 {
      --primary: var(--theme2-primary);
    }
    
    .theme3 {
      --primary: var(--theme3-primary);
    }
    
    .theme4 {
      --primary: var(--theme4-primary);
    }
    
    .theme5 {
      --primary: var(--theme5-primary);
    }
    
    .theme6 {
      --primary: var(--theme6-primary);
      --dark: white;
      --light: #111827;
      --light-gray: #374151;
      --white: #1F2937;
    }
    
    .theme6 .navbar {
      background-color: var(--theme6-primary);
      border-color: #374151;
    }
    
    .theme6 .nav-title,
    .theme6 .cancel-btn,
    .theme6 .post-input,
    .theme6 .user-name,
    .theme6 .section-label,
    .theme6 .action-btn,
    .theme6 .link-url {
      color: white;
    }
    
    .theme6 .link-input {
      background-color: #374151;
      border-color: #4B5563;
      color: white;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .action-btn span {
        display: none;
      }
      
      .action-btn {
        justify-content: center;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">发布页样式</div>
    <div class="switcher-option active" data-style="1">简约社交风</div>
    <div class="switcher-option" data-style="2">活力社交风</div>
    <div class="switcher-option" data-style="3">资讯社交风</div>
    <div class="switcher-option" data-style="4">社区社交风</div>
    <div class="switcher-option" data-style="5">生活分享风</div>
    <div class="switcher-option" data-style="6">深色主题风</div>
  </div>
  
  <div class="container">
    <!-- 1. 简约社交风发布页 -->
    <div class="post-page active theme1" id="style1">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布动态</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/64/200" alt="用户头像">
            </div>
            <div class="user-name">张三</div>
          </div>
          
          <textarea class="post-input" placeholder="分享你的想法..."></textarea>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/29/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-image"></i>
              <span>图片</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-video-camera"></i>
              <span>视频</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-smile-o"></i>
              <span>表情</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-map-marker"></i>
              <span>位置</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-at"></i>
              <span>提及</span>
            </div>
          </div>
          
          <div class="topic-section">
            <div class="section-label">
              <span>选择话题</span>
              <span>更多</span>
            </div>
            <div class="topic-selector">
              <div class="topic-item active">
                <i class="fa fa-hashtag"></i>
                <span>日常分享</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-hashtag"></i>
                <span>美食</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-hashtag"></i>
                <span>旅行</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-hashtag"></i>
                <span>音乐</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-hashtag"></i>
                <span>电影</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-hashtag"></i>
                <span>运动</span>
              </div>
            </div>
          </div>
          
          <div class="tag-section">
            <div class="section-label">
              <span>添加标签</span>
              <span>推荐</span>
            </div>
            <div class="tag-selector">
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>周末</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>快乐</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>生活</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>心情</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-plus"></i>
                <span>自定义</span>
              </div>
            </div>
            
            <div class="selected-tags">
              <div class="selected-tag">
                <span>#阳光</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
              <div class="selected-tag">
                <span>#朋友</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
            </div>
          </div>
          
          <div class="link-section">
            <div class="section-label">
              <span>添加链接</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="粘贴链接地址...">
              <div class="add-link-btn">
                <i class="fa fa-link"></i>
              </div>
            </div>
            
            <div class="added-link">
              <div class="link-favicon">
                <i class="fa fa-globe"></i>
              </div>
              <div class="link-info">
                <div class="link-title">公园游玩攻略 - 周末好去处</div>
                <div class="link-url">https://example.com/park-guide</div>
              </div>
              <div class="remove-link">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 2. 活力社交风发布页 -->
    <div class="post-page theme2" id="style2">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布内容</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/91/200" alt="用户头像">
            </div>
            <div class="user-name">莉莉</div>
          </div>
          
          <textarea class="post-input" placeholder="分享你的精彩瞬间..."></textarea>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/1082/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
            <div class="preview-item">
              <img src="https://picsum.photos/id/1083/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-camera"></i>
              <span>拍照</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-music"></i>
              <span>音乐</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-smile-o"></i>
              <span>表情</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-map-marker"></i>
              <span>地点</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-user-plus"></i>
              <span>好友</span>
            </div>
          </div>
          
          <div class="topic-section">
            <div class="section-label">
              <span>热门话题</span>
              <span>更多</span>
            </div>
            <div class="topic-selector">
              <div class="topic-item active">
                <i class="fa fa-fire"></i>
                <span>演唱会现场</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-fire"></i>
                <span>夏日派对</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-fire"></i>
                <span>音乐节</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-fire"></i>
                <span>新片上映</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-fire"></i>
                <span>游戏攻略</span>
              </div>
            </div>
          </div>
          
          <div class="tag-section">
            <div class="section-label">
              <span>流行标签</span>
              <span>添加</span>
            </div>
            <div class="tag-selector">
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>超燃</span>
              </div>
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>现场</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>开心</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>音乐</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-plus"></i>
                <span>新建</span>
              </div>
            </div>
            
            <div class="selected-tags">
              <div class="selected-tag">
                <span>#演唱会</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
              <div class="selected-tag">
                <span>#主唱</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
              <div class="selected-tag">
                <span>#氛围</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
            </div>
          </div>
          
          <div class="link-section">
            <div class="section-label">
              <span>添加音乐链接</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入歌曲链接...">
              <div class="add-link-btn">
                <i class="fa fa-plus"></i>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 3. 资讯社交风发布页 -->
    <div class="post-page theme3" id="style3">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布资讯</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/177/200" alt="用户头像">
            </div>
            <div class="user-name">科技日报</div>
          </div>
          
          <textarea class="post-input" placeholder="发布最新资讯、观点或分析..."></textarea>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/1/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-image"></i>
              <span>配图</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-file-text-o"></i>
              <span>文档</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-bar-chart"></i>
              <span>数据</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-quote-right"></i>
              <span>引用</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-link"></i>
              <span>来源</span>
            </div>
          </div>
          
          <div class="topic-section">
            <div class="section-label">
              <span>资讯分类</span>
              <span>全部</span>
            </div>
            <div class="topic-selector">
              <div class="topic-item active">
                <i class="fa fa-folder"></i>
                <span>科技创新</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-folder"></i>
                <span>财经资讯</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-folder"></i>
                <span>体育赛事</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-folder"></i>
                <span>健康医疗</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-folder"></i>
                <span>国际新闻</span>
              </div>
            </div>
          </div>
          
          <div class="tag-section">
            <div class="section-label">
              <span>关键词标签</span>
              <span>添加</span>
            </div>
            <div class="tag-selector">
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>人工智能</span>
              </div>
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>医疗科技</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>研究突破</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>未来趋势</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-plus"></i>
                <span>添加</span>
              </div>
            </div>
          </div>
          
          <div class="link-section">
            <div class="section-label">
              <span>参考来源</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入参考资料链接...">
              <div class="add-link-btn">
                <i class="fa fa-check"></i>
              </div>
            </div>
            
            <div class="added-link">
              <div class="link-favicon">
                <i class="fa fa-file-text-o"></i>
              </div>
              <div class="link-info">
                <div class="link-title">人工智能医疗诊断研究报告</div>
                <div class="link-url">https://research.example.com/ai-medical</div>
              </div>
              <div class="remove-link">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 4. 社区社交风发布页 -->
    <div class="post-page theme4" id="style4">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布帖子</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/237/200" alt="用户头像">
            </div>
            <div class="user-name">程序员小王</div>
          </div>
          
          <textarea class="post-input" placeholder="分享你的经验、问题或想法..."></textarea>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/0/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-image"></i>
              <span>图片</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-code"></i>
              <span>代码</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-file-o"></i>
              <span>附件</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-poll"></i>
              <span>投票</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-question-circle"></i>
              <span>提问</span>
            </div>
          </div>
          
          <div class="topic-section">
            <div class="section-label">
              <span>选择社区</span>
              <span>更多</span>
            </div>
            <div class="topic-selector">
              <div class="topic-item active">
                <i class="fa fa-users"></i>
                <span>前端开发</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-users"></i>
                <span>编程学习</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-users"></i>
                <span>技术分享</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-users"></i>
                <span>求职经验</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-users"></i>
                <span>行业动态</span>
              </div>
            </div>
          </div>
          
          <div class="tag-section">
            <div class="section-label">
              <span>技术标签</span>
              <span>推荐</span>
            </div>
            <div class="tag-selector">
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>HTML</span>
              </div>
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>CSS</span>
              </div>
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>JavaScript</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>前端</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-plus"></i>
                <span>添加</span>
              </div>
            </div>
            
            <div class="selected-tags">
              <div class="selected-tag">
                <span>#学习资源</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
              <div class="selected-tag">
                <span>#编程</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
            </div>
          </div>
          
          <div class="link-section">
            <div class="section-label">
              <span>资源链接</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入教程或资源链接...">
              <div class="add-link-btn">
                <i class="fa fa-plus"></i>
              </div>
            </div>
            
            <div class="added-link">
              <div class="link-favicon">
                <i class="fa fa-book"></i>
              </div>
              <div class="link-info">
                <div class="link-title">前端开发学习资源汇总</div>
                <div class="link-url">https://example.com/frontend-resources</div>
              </div>
              <div class="remove-link">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 5. 生活分享风发布页 -->
    <div class="post-page theme5" id="style5">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">分享生活</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/334/200" alt="用户头像">
            </div>
            <div class="user-name">旅行博主</div>
          </div>
          
          <textarea class="post-input" placeholder="分享你的生活瞬间和感受..."></textarea>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/1015/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
            <div class="preview-item">
              <img src="https://picsum.photos/id/1016/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
            <div class="preview-item">
              <img src="https://picsum.photos/id/1018/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-camera"></i>
              <span>相册</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-map-marker"></i>
              <span>地点</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-calendar"></i>
              <span>日期</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-smile-o"></i>
              <span>心情</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-user-o"></i>
              <span>同行</span>
            </div>
          </div>
          
          <div class="topic-section">
            <div class="section-label">
              <span>生活分类</span>
              <span>更多</span>
            </div>
            <div class="topic-selector">
              <div class="topic-item active">
                <i class="fa fa-sun-o"></i>
                <span>旅行见闻</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-cutlery"></i>
                <span>美食探店</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-coffee"></i>
                <span>休闲时光</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-heartbeat"></i>
                <span>健身运动</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-paint-brush"></i>
                <span>创意手工</span>
              </div>
            </div>
          </div>
          
          <div class="tag-section">
            <div class="section-label">
              <span>体验标签</span>
              <span>推荐</span>
            </div>
            <div class="tag-selector">
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>海边</span>
              </div>
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>日出</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>美景</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>放松</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-plus"></i>
                <span>添加</span>
              </div>
            </div>
            
            <div class="selected-tags">
              <div class="selected-tag">
                <span>#旅行</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
              <div class="selected-tag">
                <span>#自然</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
              <div class="selected-tag">
                <span>#早晨</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
            </div>
          </div>
          
          <div class="link-section">
            <div class="section-label">
              <span>相关地点</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入景点或地址链接...">
              <div class="add-link-btn">
                <i class="fa fa-map-marker"></i>
              </div>
            </div>
            
            <div class="added-link">
              <div class="link-favicon">
                <i class="fa fa-map-marker"></i>
              </div>
              <div class="link-info">
                <div class="link-title">碧海蓝天海滩公园</div>
                <div class="link-url">https://example.com/beach-park</div>
              </div>
              <div class="remove-link">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 6. 深色主题风发布页 -->
    <div class="post-page theme6" id="style6">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布内容</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/433/200" alt="用户头像">
            </div>
            <div class="user-name">电影迷</div>
          </div>
          
          <textarea class="post-input" placeholder="分享你的观影感受或推荐..."></textarea>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/1050/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-image"></i>
              <span>图片</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-film"></i>
              <span>预告片</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-star-o"></i>
              <span>评分</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-comment-o"></i>
              <span>短评</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-ticket"></i>
              <span>购票</span>
            </div>
          </div>
          
          <div class="topic-section">
            <div class="section-label">
              <span>内容分类</span>
              <span>更多</span>
            </div>
            <div class="topic-selector">
              <div class="topic-item active">
                <i class="fa fa-film"></i>
                <span>科幻电影</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-music"></i>
                <span>音乐专辑</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-book"></i>
                <span>书籍阅读</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-gamepad"></i>
                <span>游戏体验</span>
              </div>
              <div class="topic-item">
                <i class="fa fa-television"></i>
                <span>电视剧</span>
              </div>
            </div>
          </div>
          
          <div class="tag-section">
            <div class="section-label">
              <span>内容标签</span>
              <span>推荐</span>
            </div>
            <div class="tag-selector">
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>人工智能</span>
              </div>
              <div class="tag-item active">
                <i class="fa fa-tag"></i>
                <span>科幻</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>未来</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-tag"></i>
                <span>特效</span>
              </div>
              <div class="tag-item">
                <i class="fa fa-plus"></i>
                <span>添加</span>
              </div>
            </div>
            
            <div class="selected-tags">
              <div class="selected-tag">
                <span>#电影推荐</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
              <div class="selected-tag">
                <span>#剧情</span>
                <div class="remove-tag">
                  <i class="fa fa-times"></i>
                </div>
              </div>
            </div>
          </div>
          
          <div class="link-section">
            <div class="section-label">
              <span>相关链接</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入电影链接或影评...">
              <div class="add-link-btn">
                <i class="fa fa-link"></i>
              </div>
            </div>
            
            <div class="added-link">
              <div class="link-favicon">
                <i class="fa fa-film"></i>
              </div>
              <div class="link-info">
                <div class="link-title">人工智能与未来 - 电影详情</div>
                <div class="link-url">https://example.com/movie-ai-future</div>
              </div>
              <div class="remove-link">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的样式
    let currentStyle = '1';
    
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const postPages = {
      '1': document.getElementById('style1'),
      '2': document.getElementById('style2'),
      '3': document.getElementById('style3'),
      '4': document.getElementById('style4'),
      '5': document.getElementById('style5'),
      '6': document.getElementById('style6')
    };
    
    // 切换发布页样式
    function switchStyle(style) {
      // 隐藏所有页面
      Object.values(postPages).forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示选中的样式
      if (postPages[style]) {
        postPages[style].classList.add('active');
        currentStyle = style;
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        switchStyle(style);
      });
    });
    
    // 话题选择交互
    document.querySelectorAll('.topic-item').forEach(item => {
      item.addEventListener('click', function() {
        // 对于简约社交风和资讯社交风，话题是单选
        const isSingleSelect = this.closest('#style1') || this.closest('#style3');
        
        if (isSingleSelect) {
          // 单选模式
          const parent = this.parentElement;
          parent.querySelectorAll('.topic-item').forEach(topic => {
            topic.classList.remove('active');
          });
        }
        
        this.classList.toggle('active');
      });
    });
    
    // 标签选择交互
    document.querySelectorAll('.tag-item').forEach(item => {
      // 自定义/添加标签按钮不使用toggle逻辑
      if (item.querySelector('.fa-plus')) {
        item.addEventListener('click', function() {
          const tagText = prompt('请输入标签名称:');
          if (tagText && tagText.trim()) {
            const selectedTags = this.closest('.tag-section').querySelector('.selected-tags');
            
            // 创建新标签
            const newTag = document.createElement('div');
            newTag.className = 'selected-tag';
            newTag.innerHTML = `
              <span>#${tagText.trim()}</span>
              <div class="remove-tag">
                <i class="fa fa-times"></i>
              </div>
            `;
            
            selectedTags.appendChild(newTag);
            
            // 为新标签添加删除事件
            newTag.querySelector('.remove-tag').addEventListener('click', function() {
              newTag.remove();
            });
          }
        });
      } else {
        // 普通标签选择
        item.addEventListener('click', function() {
          this.classList.toggle('active');
          
          const tagText = this.querySelector('span').textContent;
          const selectedTags = this.closest('.tag-section').querySelector('.selected-tags');
          
          // 检查标签是否已存在
          let tagExists = false;
          selectedTags.querySelectorAll('.selected-tag span').forEach(span => {
            if (span.textContent === `#${tagText}`) {
              tagExists = true;
              // 如果取消选择，则移除标签
              if (!this.classList.contains('active')) {
                span.closest('.selected-tag').remove();
              }
            }
          });
          
          // 如果是新选择的标签，则添加到已选标签
          if (this.classList.contains('active') && !tagExists) {
            const newTag = document.createElement('div');
            newTag.className = 'selected-tag';
            newTag.innerHTML = `
              <span>#${tagText}</span>
              <div class="remove-tag">
                <i class="fa fa-times"></i>
              </div>
            `;
            
            selectedTags.appendChild(newTag);
            
            // 为新标签添加删除事件
            newTag.querySelector('.remove-tag').addEventListener('click', function() {
              newTag.remove();
              // 同步取消标签选择状态
              item.classList.remove('active');
            });
          }
        });
      }
    });
    
    // 删除已选标签
    document.querySelectorAll('.remove-tag').forEach(btn => {
      btn.addEventListener('click', function() {
        const tagText = this.closest('.selected-tag').querySelector('span').textContent.replace('#', '');
        this.closest('.selected-tag').remove();
        
        // 同步取消标签选择状态
        const tagItems = this.closest('.tag-section').querySelectorAll('.tag-item');
        tagItems.forEach(item => {
          if (item.querySelector('span').textContent === tagText) {
            item.classList.remove('active');
          }
        });
      });
    });
    
    // 移除图片
    document.querySelectorAll('.remove-img').forEach(btn => {
      btn.addEventListener('click', function() {
        this.closest('.preview-item').remove();
      });
    });
    
    // 移除链接
    document.querySelectorAll('.remove-link').forEach(btn => {
      btn.addEventListener('click', function() {
        this.closest('.added-link').remove();
      });
    });
    
    // 添加链接
    document.querySelectorAll('.add-link-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const linkInput = this.closest('.link-input-group').querySelector('.link-input');
        const linkUrl = linkInput.value.trim();
        
        if (linkUrl) {
          // 简单提取链接标题（实际应用中可通过API获取）
          let linkTitle = "链接内容";
          try {
            const url = new URL(linkUrl);
            linkTitle = url.hostname.replace('www.', '');
          } catch (e) {
            linkTitle = "外部链接";
          }
          
          // 检查是否已有链接，有则替换，无则添加
          const linkSection = this.closest('.link-section');
          let addedLink = linkSection.querySelector('.added-link');
          
          if (addedLink) {
            addedLink.querySelector('.link-title').textContent = linkTitle;
            addedLink.querySelector('.link-url').textContent = linkUrl;
          } else {
            addedLink = document.createElement('div');
            addedLink.className = 'added-link';
            addedLink.innerHTML = `
              <div class="link-favicon">
                <i class="fa fa-globe"></i>
              </div>
              <div class="link-info">
                <div class="link-title">${linkTitle}</div>
                <div class="link-url">${linkUrl}</div>
              </div>
              <div class="remove-link">
                <i class="fa fa-times"></i>
              </div>
            `;
            
            linkSection.appendChild(addedLink);
            
            // 为新链接添加删除事件
            addedLink.querySelector('.remove-link').addEventListener('click', function() {
              addedLink.remove();
            });
          }
          
          // 清空输入框
          linkInput.value = '';
        }
      });
    });
    
    // 发布按钮交互
    document.querySelectorAll('.post-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const postText = this.closest('.post-page').querySelector('.post-input').value.trim();
        
        if (postText) {
          alert('发布成功！');
        } else {
          alert('请输入内容后再发布');
        }
      });
    });
    
    // 取消按钮交互
    document.querySelectorAll('.cancel-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (confirm('确定要取消发布吗？已输入的内容将会丢失。')) {
          this.closest('.post-page').querySelector('.post-input').value = '';
        }
      });
    });
  </script>
</body>
</html>
